<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('入住房屋')" />
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <th:block th:include="include :: jquery-steps-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>添加业主房产</h5>
                    </div>
                    <div class="ibox-content">
                        <form id="form" action="" class="wizard-big">
                            <h1>选择楼栋</h1>
                            <fieldset>
                                <div class="row">
                                    <div class="col-sm-12">
                                        <div class="form-group">
                                            <label style="position: relative;left: 90px;top: 10px" class="col-sm-3 control-label ">选择楼栋：</label>
                                            <div class="col-sm-8">
                                                <select name="fId" onchange="floorChange()" id="fId" class="form-control m-b" required>
                                                    <option  value="">请选择</option>
                                                    <option th:each="floor : ${floorSelectAdd}"  th:text="${floor.name}" th:value="${floor.floorId}"></option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <h2>楼栋信息</h2>

                                <div style="margin-right: 60px;font-size:14px" class="select-list col-sm-12">
                                        <li class="col-sm-5"  style="margin-bottom: 20px">
                                            楼栋id：<span id="faId"></span>
                                        </li>
                                        <li class="col-sm-3" style="margin-bottom: 20px">
                                            楼栋名称：<span id="faname"></span>号楼
                                        </li>
                                        <li class="col-sm-3" style="margin-bottom: 20px">
                                            楼栋编号：<span id="fabian"></span>
                                        </li>
                                        <li class="col-sm-3" style="margin-bottom: 20px">
                                            备注：<span id="faremark"></span>
                                        </li>
                                 </div>
                            </fieldset>
                            <h1>选择单元信息</h1>
                            <fieldset>
                                <div class="row">
                                    <div class="col-sm-12">
                                        <div class="form-group">
                                            <label style="position: relative;left: 90px;top: 10px" class="col-sm-3 control-label ">选择单元：</label>
                                            <div class="col-sm-8">
                                                <select id="uid" class="form-control m-b" onchange="untiChange()" name="unitId" required>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <h2>单元信息详情</h2>
                                <div style="margin-right: 60px;font-size:14px" class="select-list col-sm-12">
                                    <li class="col-sm-4"  style="margin-bottom: 20px">
                                        单元id：<span id="aaId"></span>
                                    </li>
                                    <li class="col-sm-3" style="margin-bottom: 20px">
                                        单元编号：<span id="aabian"></span>
                                    </li>
                                    <li class="col-sm-3" style="margin-bottom: 20px">
                                        层数：<span id="aaceng"></span>
                                    </li>
                                    <li class="col-sm-3" style="margin-bottom: 20px">
                                        备注：<span id="aaremark"></span>
                                    </li>
                                </div>
                            </fieldset>

                            <h1>选择房屋信息</h1>
                            <fieldset>
                                <div class="row">
                                    <div class="col-sm-12">
                                        <div class="form-group">
                                            <label style="position: relative;left: 90px;top: 10px" class="col-sm-3 control-label ">选择房屋：</label>
                                           <input type="hidden" id="ownerId" name="ownerId" th:value="${fzBuildingOwnerRoomRel.ownerId}"/>
                                            <input type="hidden" id="assetsType" name="assetsType" value="0"/>
                                            <div class="col-sm-8">
                                                <select id="detailsId" class="form-control m-b" onchange="roomChange()" name="detailsId" required>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <h2>房屋信息详情</h2>
                                <div style="margin-right: 60px;font-size:14px" class="select-list col-sm-12">
                                    <li class="col-sm-4"  style="margin-bottom: 20px">
                                        房屋id：<span id="zaId"></span>
                                    </li>
                                    <li class="col-sm-3" style="margin-bottom: 20px">
                                        房屋编号：<span id="zabian"></span>
                                    </li>
                                    <li class="col-sm-3" style="margin-bottom: 20px">
                                        层数：<span id="zaceng"></span>层
                                    </li>
                                    <li class="col-sm-4" style="margin-bottom: 20px">
                                    户型：<span id="zahu"></span>
                                     </li>
                                    <li class="col-sm-3" style="margin-bottom: 20px">
                                       面积：<span id="zamian"></span>平方米
                                    </li>
                                    <li class="col-sm-3" style="margin-bottom: 20px">
                                       备注：<span id="zaremark"></span>
                                    </li>
                                </div>
                            </fieldset>

                            <h1>业主信息</h1>
                            <fieldset>
                                <div class="row">
                                    <div class="col-sm-12">
                                                <div class="ibox-content">
                                                        <div class="media">
                                                            <a class="media-left" href="#">
                                                                <img width="90px" height="100px" src="/img/profile.jpg" alt="">
                                                            </a>
                                                            <div  class="media-body">
                                                                <div style="margin-left: 60px;font-size:14px" class="select-list">
                                                                    <li class="col-md-4" style="margin-bottom: 20px">
                                                                        业主ID：[[${fzBuildingOwnerRoomRel.ownerId}]]
                                                                    </li>
                                                                    <li class="col-md-4" style="margin-bottom: 20px">
                                                                        名字：[[${fzBuildingOwnerRoomRel.name}]]
                                                                    </li>
                                                                    <li class="col-md-4" style="margin-bottom: 20px">
                                                                        性别：[[${@dict.getLabel('sys_user_sex',fzBuildingOwnerRoomRel.sex)}]]
                                                                    </li>

                                                                    <li class="col-md-4" style="margin-bottom: 20px">
                                                                        身份证：[[${fzBuildingOwnerRoomRel.numberId}]]
                                                                    </li>
                                                                    <li class="col-md-4" style="margin-bottom: 20px">
                                                                        联系方式：[[${fzBuildingOwnerRoomRel.phone}]]
                                                                    </li>
                                                                    <li class="col-md-4" style="margin-bottom: 20px">
                                                                        备注：[[${fzBuildingOwnerRoomRel.remark}]]
                                                                    </li>
                                                                </div>
                                                            </div>
                                                        </div>
                                                </div>
                                    </div>
                                </div>
                            </fieldset>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: jquery-steps-js" />
    <script type="text/javascript">
        function floorChange(){
            var fid=$("#fId").val();
            $.ajax({url:"/system/room/untilSelect",type:"get",data:"floorId="+fid,async:true,success:function (reslut) {
                    if (reslut!="") {
                        $("#uid").text("");
                        $("#uid").append("<option selected='selected' value=''>请选择</option>");
                        $.each($.parseJSON(reslut), function (index, item) {
                            $("#uid").append("<option  value='" + item.unitId + "'>" + item.unitNum+ "</option>");
                        });
                    }else{
                        $("#uid").text("");
                    }
                },error:function (reslut) {
                    layer.msg("操作失败", {icon: 2});
                }
            });
            //楼栋信息赋值
            if(fid==""){
                $("#faId").text("");
                $("#faname").text("");
                $("#fabian").text("");
                $("#faremark").text("");
            }else{
            $.ajax({url:"/system/floor/floorById/"+fid,type:"get",async:true,success:function (reslut) {
                    if (reslut.code==200) {
                       $("#faId").text(reslut.list[0].floorId);
                        $("#faname").text(reslut.list[0].name);
                        $("#fabian").text(reslut.list[0].floorNum);
                        $("#faremark").text(reslut.list[0].remark);
                    }else{
                        layer.msg("操作失败", {icon: 2});
                    }
                },error:function (reslut) {
                    layer.msg("操作失败", {icon: 2});
                }
            });
            }
        }


        //
        function untiChange(){
            var uid=$("#uid").val();
            $.ajax({url:"/system/room/roomSelect",type:"get",data:"unitId="+uid,async:true,success:function (reslut) {
                    if (reslut!="") {
                        $("#detailsId").text("");
                        $("#detailsId").append("<option selected='selected' value=''>请选择</option>");
                        $.each($.parseJSON(reslut), function (index, item) {
                            $("#detailsId").append("<option  value='" + item.roomId + "'>" + item.roomNum+ "</option>");
                        });
                    }else{
                        $("#detailsId").text("");
                    }
                },error:function (reslut) {
                    layer.msg("操作失败", {icon: 2});
                }
            });
            //单元信息
            if (uid==""){
                $("#aaId").text("");
                $("#aabian").text("");
                $("#aaceng").text("");
                $("#aaremark").text("");
            }else{
            $.ajax({url:"/system/unit/unitById/"+uid,type:"get",async:true,success:function (reslut) {
                    if (reslut.code==200) {
                        $("#aaId").text(reslut.list[0].unitId);
                        $("#aabian").text(reslut.list[0].unitNum);
                        $("#aaceng").text(reslut.list[0].layerCount);
                        $("#aaremark").text(reslut.list[0].remark);
                    }else{
                        layer.msg("操作失败", {icon: 2});
                    }
                },error:function (reslut) {
                    layer.msg("操作失败", {icon: 2});
                }
            });
            }
        }

        function roomChange(){

            var detailsId=$("#detailsId").val();
            if(detailsId==""){
                $("#zaId").text("");
                $("#zabian").text("");
                $("#zaceng").text("");
                $("#zahu").text("");
                $("#zamian").text("");
                $("#zaremark").text("");
            }else{
            //房屋信息
            $.ajax({url:"/system/room/roomById/"+detailsId,type:"get",async:true,success:function (reslut) {
                    if (reslut.code==200) {
                        $("#zaId").text(reslut.list[0].roomId);
                        $("#zabian").text(reslut.list[0].roomNum);
                        $("#zaceng").text(reslut.list[0].layer);
                        $("#zahu").text(reslut.list[0].apartment);
                        $("#zamian").text(reslut.list[0].builtUpArea);
                        $("#zaremark").text(reslut.list[0].remark);
                    }else{
                        layer.msg("操作失败", {icon: 2});
                    }
                },error:function (reslut) {
                    layer.msg("操作失败", {icon: 2});
                }
            });
            }
        }


        $(document).ready(function () {-
            $("#wizard").steps();
            $("#form").steps({
                bodyTag: "fieldset", onStepChanging: function (event, currentIndex, newIndex) {
                    if (currentIndex > newIndex) {
                        return true
                    }
                    if (newIndex === 3 && Number($("#age").val()) < 18) {
                        return false
                    }
                    var form = $(this);
                    if (currentIndex < newIndex) {
                        $(".body:eq(" + newIndex + ") label.error", form).remove();
                        $(".body:eq(" + newIndex + ") .error", form).removeClass("error")
                    }
                    form.validate().settings.ignore = ":disabled,:hidden";
                    return form.valid()
                }, onStepChanged: function (event, currentIndex, priorIndex) {
                    if (currentIndex === 2 && Number($("#age").val()) >= 18) {
                        $(this).steps("next")
                    }
                    if (currentIndex === 2 && priorIndex === 3) {
                        $(this).steps("previous")
                    }
                }, onFinishing: function (event, currentIndex) {
                    var form = $(this);
                    form.validate().settings.ignore = ":disabled";
                    return form.valid()
                }, onFinished: function (event, currentIndex) {
                    var form = $(this);
                    form.submit()
                }
            }).validate({
                errorPlacement: function (error, element) {
                    element.before(error)
                }, rules: {confirm: {equalTo: "#password"}}
            })
            $("#form").submit(function () {
                $.ajax({url:"/owner/rel/detail",type:"get",data:"ownerId="+$("#ownerId").val()+"&assetsType="+$("#assetsType").val()+"&detailsId="+$("#detailsId").val(),async:true,success:function () {
                        console.log("11")
                    },error:function () {
                        layer.msg("操作失败", {icon: 2});
                    },complete:function () {
                    }
                });
                    parent.location.reload();
            });

        });
    </script>
</body>
</html>